import React, {Component} from "react";
import {Layout,Menu,Breadcrumb,Icon} from "antd";
import {Link, withRouter} from "react-router-dom";
import MenuList from "../config/menu"
class SideBar extends Component{
    state = {
        menuSelectedKeys: [],
        menuOpenKeys:[],
        collapsed: false,
    }

    constructor(props){
        super(props);
        this.buildMenu = this.buildMenu.bind(this);
        this.findSelectedMenuItem = this.findSelectedMenuItem.bind(this);
        this.handleMenuOpenChange = this.handleMenuOpenChange.bind(this);
    }

    componentDidMount(){
        this.findSelectedMenuItem(MenuList)
    }

    handleMenuOpenChange(e) {
        this.setState({
            menuOpenKeys: [e[e.length - 1]]
        });
    }

    findSelectedMenuItem(menu, stack = []){
        for(let m of menu){
            if(m.children && m.children.length>0){
                this.findSelectedMenuItem(m.children,[...stack, m]);
            } else {

                let isMatch = false, isChild = false;
                if (m.match instanceof Function && m.match(this.props.match.path)){
                    isMatch = true;
                    isChild = true;
                } else if(m.match instanceof Array && m.match.includes(this.props.match.path)){
                    isMatch = true;
                    isChild = true;
                } else if (m.path === this.props.match.path) {
                    isMatch = true;
                }
                if (isMatch) {
                    let breadcrumbStack = [...stack.map(value => {
                        return {key:value.key, title: value.title, path: value.path}
                    })];
                    if (isChild) {
                        breadcrumbStack.push({key: m.key, title: m.title, path: m.path});
                    }
                    this.props.onMenuSelectionChange && this.props.onMenuSelectionChange(breadcrumbStack);
                    this.setState({
                        menuOpenKeys: stack.map(x=> x.key),
                        menuSelectedKeys: [m.key]
                    });

                    return;
                }
            }

        }

    }

    buildMenu(menu){
        return menu.map(v =>
            (v.children && v.children.length >0)
            ? <Menu.SubMenu className={'menu'} key={v.key} title={<span>{v.icon}{v.title}</span>}>{this.buildMenu(v.children)}</Menu.SubMenu>
                : <Menu.Item className={'menu'} key={v.key}><Link to={v.path || ''}>{v.title}</Link></Menu.Item>
        )
    }
    render(){
        return(
            <Layout.Sider>
                <Menu mode={'inline'}
                      openKeys={this.state.menuOpenKeys}
                      selectedKeys={this.state.menuSelectedKeys}
                      onOpenChange={this.handleMenuOpenChange}
                >
                    {this.buildMenu(MenuList)}
                </Menu>
            </Layout.Sider>
        )
    }
}
export default withRouter(SideBar);